.exchange__depth {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;

  .table {
    height: 100%;
    font-size: .75rem;
    overflow: hidden;

    &__row {
      position: relative;
      color: rgba($white, .9);
      padding: 0 .5rem;
      z-index: 200;
      transition: background-color 350ms ease;
      background-color: rgba($texas-rose-orange, 0);
    }

    &__header-row {
      color: rgba($white, .25);
      font-weight: 400;
      font-size: .75rem;
      background-color: $mineshaft-gray;
      padding: 0 .5rem;
    }

    &__header {
      @extend %ellipsify;
      padding: .25rem 0;
    }

    &__cell {
      font-weight: 400;
      font-family: 'Roboto Mono', monospace;
      font-size: .6875rem;
      padding: .125rem 0;
    }

    &__header,
    &__cell {
      &:nth-of-type(1) {
        flex-basis: 30%;
      }

      &:nth-of-type(2) {
        flex-basis: 30%;
        text-align: right;
      }

      &:nth-of-type(3) {
        flex-basis: 40%;
        text-align: right;
      }
    }
  }

  &__content {
    @extend %column-nowrap;
    flex: 1 1 auto;
    height: 0;
  }

  &__buy {
    @extend %column-nowrap;
    flex: 1 1 auto;
    height: 0;
    overflow-y: auto;
    box-shadow: inset 0 0 4px 2px rgba($black, .1);

    .table {
      &__row {
        flex: 0 0 auto;
        border-top: 1px solid mix($black, $mineshaft-gray, 60);
        border-bottom: 1px solid mix($black, $mineshaft-gray, 60);
      }

      &__cell {
        &:nth-of-type(1) {
          color: $shamrock-green;
        }
      }
    }

    .exchange__depth {
      &__percentage {
        background-color: rgba($shamrock-green, .075);
      }
    }
  }

  &__sell {
    @extend %column-nowrap;
    flex-direction: column-reverse;
    flex: 1 1 auto;
    height: 0;
    overflow-y: auto;
    box-shadow: inset 0 0 4px 2px rgba($black, .1);

    .table {
      &__row {
        flex: 0 0 auto;
        border-top: 1px solid mix($black, $mineshaft-gray, 60);
        border-bottom: 1px solid mix($black, $mineshaft-gray, 60);
      }

      &__cell {
        &:nth-of-type(1) {
          color: $persimmon-red;
        }
      }
    }

    .exchange__depth {
      &__percentage {
        background-color: rgba($persimmon-red, .075);
      }
    }
  }

  &__crossed-row {
    display: none;
  }

  &__highlight {
    transition: background-color 100ms ease-out !important;
    background-color: rgba($texas-rose-orange, .1) !important;
  }

  &__group {
    transition: flex-grow 100ms ease-in-out;
    &--hidden {
      flex: 0;
    }
  }

  &__spread {
    @extend %row-nowrap;
    align-items: center;
    background-color: $mineshaft-gray;
    box-shadow: 0 0 0 2px rgba($black, .1);
    flex: 0 0 auto;
    padding: .25rem 0;
    z-index: 200;

    .tooltip {
      @extend %row-nowrap;
      width: 100%;

      &:hover {
        .tooltip {
          &__content {
            bottom: calc(100% + 4px) !important;
          }
        }
      }

      &:nth-of-type(2) {
        .tooltip__content {
          right: 0;
          left: auto;
          &:after {
            bottom: -4px;
            left: auto;
            right: 12px;
          }
        }
        .table__cell {
          text-align: right;
        }
      }
    }

    .table {
      &__row {
        width: calc(100% - .5rem);
        padding: 0 .25rem;
      }

      &__cell {
        padding: 0 .125rem;
        font-size: 1rem;
        font-weight: 400;
        color: rgba($white, .9);
        cursor: pointer;
      }
    }

    &--up {
      .table__cell {
        color: rgba($shamrock-green, .9);
      }
    }

    &--down {
      .table__cell {
        color: rgba($persimmon-red, .9);
      }
    }

    &--loading {
      padding: .25rem;
      .table__row {
        position: relative;
        background-color: rgba($black, .25);
        border-radius: .25rem;
        overflow: hidden;

        &:after {
          @extend %loading-placeholder;
        }
      }
    }
  }

  &__percentage {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 100;
  }
}